<!-- 设置费用 -->
<template>
  <div class="setting-costs-dialog">
    <el-dialog
      width="900px"
      class=""
      top="6vh"
      title="设置费用"
      :visible="$store.state.dialog.settingCosts"
      @close="close">
      <el-table
        :data="contactInformation"
        style="width: 100%">
        <el-table-column
          fixed
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click.native.prevent="delCostSetList(scope.$index, scope.row.feeID)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="feeName"
          label="费用名称"
          width="200">
          <template slot-scope="scope">
            {{scope.row.feeName}}
          </template>
        </el-table-column>
        <el-table-column
          prop="feeType"
          label="费用类型"
          width="200">
          <template>
            收取客户费用
          </template>
        </el-table-column>
        <el-table-column
          prop="boxType"
          label="箱型"
          width="150">
          <template slot-scope="scope">
            {{scope.row.boxType}}
          </template>
        </el-table-column>
        <el-table-column
          prop="money"
          label="金额"
          width="200">
          <template slot-scope="scope">
            {{scope.row.money}}
          </template>
        </el-table-column>
      </el-table>
      <el-button style="margin-top: 10px" type="primary" size="mini" icon="el-icon-plus" @click="tabesAdd">新建</el-button>
      <el-form label-width="100px" size="mini">
        <el-table
          :data="mydata"
          style="width: 100%">
          <el-table-column
            fixed
            width="100">
            <template slot-scope="scope">
              <el-button size="mini" @click.native.prevent="deleteRow(scope.$index, mydata)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="feeName"
            width="200">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.feeName"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="feeType"
            width="200">
            <template>
              收取客户费用
            </template>
          </el-table-column>
          <el-table-column
            prop="boxType"
            width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.boxType">
                <el-option v-for="(item, index) in boxTypes" :key="index" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            width="200">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.money"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="Addboarcos()" size="mini">添 加</el-button>
        <el-button @click="close" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { DeleteCostSet, AddCostSet } from '../api/putBoxCompany'
export default {
  data () {
    return {
      mydata: [],
      boxTypes: [
        { label: '20GP' },
        { label: '40GP' },
        { label: '40HC' },
        { label: '20FR' },
        { label: '20HT' },
        { label: '20OT' },
        { label: '20RF' },
        { label: '20RH' },
        { label: '20TK' },
        { label: '20GH' },
        { label: '40FR' },
        { label: '20FQ' },
        { label: '20HQ' },
        { label: '40FQ' },
        { label: '40HT' },
        { label: '40HCHT' },
        { label: '40OT' },
        { label: '40RF' },
        { label: '40TK' },
        { label: '40RH' },
        { label: '40HQ' },
        { label: '45FR' },
        { label: '45GP' },
        { label: '45HC' },
        { label: '45HT' },
        { label: '45OT' },
        { label: '45RF' },
        { label: '45RH' },
        { label: '45TK' },
        { label: '45HQ' },
        { label: '53HC' },
        { label: '20HC' },
        { label: '10GP' },
        { label: '40HCFR' },
        { label: '40HCOT' },
        { label: '45HCOT' }
      ]
    }
  },
  props: {
    setboat: {
      type: String,
      default: () => {
        return ''
      }
    },
    contactInformation: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    // 新增客户
    async Addboarcos () {
      const lg = this.mydata.length
      if (lg > 0) {
        for (let i = 0; i < lg; i++) {
          this.mydata[i].money = parseInt(this.mydata[i].money)
        }
      } else {
        this.$notify({
          title: '警告',
          message: '请新建费用后再添加',
          type: 'warning'
        })
      }
      const res = await AddCostSet(this.mydata)
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.$parent.getCostSetList(this.setboat)
        this.mydata = []
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 删除船代公司费用
    async delCostSetList (index, delid) {
      const res = await DeleteCostSet({
        feeID: delid
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.$parent.getCostSetList(this.setboat)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    close () {
      this.$store.commit('hide_setting_costs_dialog')
    },
    // 增加
    tabesAdd () {
      const tabData = {
        feeName: '', // 费用名称
        feeType: 1, // 费用类型 1收客户费用
        boxType: '', // 箱型
        money: '', // 金额
        boatAgentId: this.setboat // 船代公司Id
      }
      this.mydata.push(tabData)
      // console.log(this.contactInformation)
    },
    // 删除
    deleteRow (index, rows) {
      console.log(rows)
      // this.delCostSetList(index, rows)
      rows.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="less">

</style>
